<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common/common.css" />
		<link rel="stylesheet" type="text/css" href="css/my_animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/map.css" />
	</head>

	<body>
		<div class="web">
			<div class="yinye rotate360">
				<img src="images/index/music_ico.png" />
			</div>
			<audio src="audio/1.mp3" class="audio" autoplay="autoplay" loop="loop"></audio>
			<div class="map_cont">
				<div class="map_frame" id="container"></div>
			</div>
			<div class="text">
				<p>赶紧前往张裕白兰地线下兑换点</p>
				<p>领取婚宴定制囍酒套装限量好礼！</p>
			</div>
			<div class="index">
				<a href="index.html">
					<img src="images/common/home.png" />
				</a>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=f562a5261b4e5e747584a34536d091b4&plugin=AMap.AdvancedInfoWindow"></script>
		<!--<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
		<script type="text/javascript">
			var dataarr;
			$.ajax({
				type: "get",
				url: "json/data.js",
				dataType: "json",
				success: function(res) {
					dataarr = res;
				}
			});

			var map, geolocation;
			//加载地图，调用浏览器定位服务
			
    		map = new AMap.Map('container', {
		        resizeEnable: true,
				zoom: 40
		    });
			map.plugin('AMap.Geolocation', function() {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：无穷大
					buttonOffset: new AMap.Pixel(20, -40), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					buttonPosition: 'RB'
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
				AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
			});
			//解析定位结果
			var posX, posY;
			
			var num;
			function onComplete(data) {
				posX = data.position.getLng();
				posY = data.position.getLat();
				console.log(posX, posY);
				console.log(dataarr)
				dingwei(dataarr);
				var lnglat = [dataarr[num].JD,dataarr[num].WD];
				console.log(dataarr[num].JD,dataarr[num].WD)
				var marker = new AMap.Marker({
					position: lnglat
				});
				marker.setMap(map);

//				var content = '<div class="info-title">高德地图</div><div class="info-content">' +
//					'<img src="http://webapi.amap.com/images/amap.jpg">' +
//					'高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br/>' +
//					'<a target="_blank" href = "http://mobile.amap.com/">点击下载高德地图</a>';
				var content='<div class="info-title">'+dataarr[num].shop_name+'</div>'
				+'<div class="info-content">'
				+'<div>地址：'+dataarr[num].address+'</div>'
				+'<div>电话：'+dataarr[num].mobile+'</div>'
				+'</div>';
				var infowindow1 = new AMap.AdvancedInfoWindow({
					content: content,
					offset: new AMap.Pixel(0, -30)
				});
				infowindow1.open(map, lnglat);
				
			}

			function dingwei(dataarr) {
				var arr = [];
				for(var i = 0; i < dataarr.length; i++) {
					var jl = Math.sqrt(Math.pow(posX - dataarr[i].JD, 2) + Math.pow(posY - dataarr[i].WD, 2));
					arr.push(jl);
					Array.prototype.min = function() {
						var min = this[0];
						var min_index = 0;
						var len = this.length;
						for(var i = 1; i < len; i++) {
							if(this[i] < min) {
								min = this[i];
								min_index = i;
							}
						}
						return min_index;
					}
					num=arr.min();
				}
				console.log(dataarr[arr.min()])
			}
		</script>
	</body>

</html>